<template>
  <div class="organization-manage-container">
    <!-- 顶部筛选条件 -->
    <div class="conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <!-- @change="conditionChange($event, 'status')" -->
          <!-- 租户名称 -->
          <a-tree-select
            allow-clear
            placeholder="请选择租户名称"
            :replaceFields="{
              children: 'child',
              title: 'tenantName',
              key: 'id',
              value: 'tenantCode',
            }"
            v-model="conditions.proName"
            :tree-data="conditions.proNameSource"
            @change="tenantChange"
          >
          </a-tree-select>
        </template>
        <template slot="operate">
          <a-button type="primary" @click="search"> 查询 </a-button>
        </template>
      </ScreenConditions>
    </div>
    <!-- 主体区域 -->
    <div class="result-container">
      <div class="common-result-container-header" header="组织管理">
        <!-- <a-button type="primary" @click="gotoAdd" v-if="showButton">
          新增根节点
        </a-button> -->
      </div>
      <div class="result-body">
        <!-- table -->
        <div class="table-container" v-loading="table.loading">
          <vxe-table
            show-overflow
            show-header-overflow
            show-footer-overflow
            show-footer
            height="99%"
            class="scrollbarStyle"
            align="center"
            :data="table.source"
            :column-config="{ resizable: true }"
            ref="xTable"
            :tree-config="{
              rowField: 'id',
              parentField: 'parentOrgCode',
              children: 'childs',
            }"
          >
            <vxe-column
              :title="item.title"
              :field="item.key"
              :key="index"
              :min-width="item.width"
              show-overflow
              :tree-node="item.treeNode"
              v-for="(item, index) in table.columns"
              :align="item.align || 'center'"
              header-align="center"
            >
            </vxe-column>
            <!-- 操作 -->
            <vxe-column title="操作" width="320" fixed="right">
              <template #default="{ row }">
                <div class="text-button-group">
                  <a-button
                    type="link"
                    @click="gotoChildrenNodeAdd(row)"
                    v-if="showButton"
                  >
                    新增子节点
                  </a-button>
                  <a-button type="link" @click="gotoDetails(row)">
                    查看
                  </a-button>
                  <a-button
                    type="link"
                    @click="gotoEdit(row)"
                    v-if="showButton"
                  >
                    编辑
                  </a-button>
                  <a-button
                    type="link"
                    class="danger"
                    @click="handleDelClick(row)"
                    v-if="showButton && row.del"
                  >
                    删除
                  </a-button>
                </div>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
        <!-- 分页 -->
        <div class="pager-container">
          <vxe-pager
            background
            :current-page.sync="pager.page"
            :page-size.sync="pager.pageSize"
            :total="pager.total"
            :layouts="[
              'PrevPage',
              'JumpNumber',
              'NextPage',
              'Sizes',
              'FullJump',
            ]"
            @page-change="paginationChange"
          >
            <template #left>
              <div class="vxe-pager-left-tip-container">
                第<span>1</span>到<span
                  >{{ Math.ceil(pager.total / pager.pageSize) || 1 }}页 </span
                >共<span>{{ pager.total }}</span
                >条记录
              </div>
            </template>
          </vxe-pager>
        </div>
      </div>
    </div>
    <!-- 【弹窗】新增根节点 -->
    <addRootNodeModal
      :visible.sync="addRootNodeModalVisible"
      :model="model"
    ></addRootNodeModal>
    <!-- 【弹窗】新增子节点 -->
    <addChildrenNodeModal
      :visible.sync="addChildrenNodeModalVisible"
      :model="model"
    ></addChildrenNodeModal>
  </div>
</template>

<script>
//【组织管理】列表
import bjSelect from "@/components/bj-select";
//【弹窗】新增根节点
import addRootNodeModal from "./components/addRootNodeModal";
//【弹窗】新增子节点
import addChildrenNodeModal from "./components/addChildrenNodeModal";
import { getLoginData } from "@/tools";
import { notificationTip, addAttributeByKey } from "@/utils";
import {
  getOrganizationManageList,
  getOrganizationDelete,
  getNewTenantList,
} from "@/api/user-center/organizationManage.js";
import { getPurView } from "@/api/user-center/userManage.js";

export default {
  components: {
    bjSelect,
    addRootNodeModal,
    addChildrenNodeModal,
  },
  data() {
    return {
      //顶部筛选条件
      conditions: {
        //租户名称
        proName: undefined,
        proNameSource: [],
        proNameLoading: false,
      },
      //table
      table: {
        loading: false,
        source: [],
        columns: [
          {
            title: "组织名称",
            dataIndex: "orgName",
            key: "orgName",
            width: "",
            treeNode: true,
            align: "left",
          },
          {
            title: "组织编码",
            dataIndex: "orgCode",
            key: "orgCode",
            width: "",
          },
          {
            title: "组织单位名称",
            dataIndex: "orgNuitName",
            key: "orgNuitName",
            width: "",
          },
          {
            title: "组织类型",
            dataIndex: "orgTypeDesc",
            key: "orgTypeDesc",
            width: "",
          },
          {
            title: "单位类型",
            dataIndex: "secTypeDesc",
            key: "secTypeDesc",
            width: "",
          },
          {
            title: "租户名称",
            dataIndex: "tenantDesc",
            key: "tenantDesc",
            width: "",
          },
        ],
      },
      //分页
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      //新增根节点-弹窗
      addRootNodeModalVisible: false,
      //新增子节点-弹窗
      addChildrenNodeModalVisible: false,
      //组件传参
      model: {
        id: "",
        text: "",
        tenantCode: "",
        orgTypeValue: "",
        parentOrgCode: "",
      },
      //按钮权限
      showButton: false,
    };
  },
  mounted() {
    this.getPurviewFlag();
    this.getTreeTenantList();
    this.getTableData();
  },
  methods: {
    //查询操作权限
    getPurviewFlag() {
      getPurView()
        .then((res) => {
          this.showButton = res?.data?.result || false;
        })
        .catch((_) => {
          this.showButton = false;
        });
    },
    //【查询条件】查询项目名称
    getTreeTenantList() {
      return new Promise((resolve, reject) => {
        let { userId } = getLoginData();
        getNewTenantList({ userId })
          .then((res) => {
            let { data } = res;
            let tree = data?.result || [];
            this.conditions.proNameSource = addAttributeByKey(
              null,
              "scopedSlots",
              { icon: "custom" },
              tree,
              "child"
            );
            resolve();
          })
          .catch((_) => {
            reject();
          })
          .finally((_) => {});
      });
    },
    //选择租户
    tenantChange() {
      this.search();
    },
    //查询
    search() {
      this.pager.page = 1;
      this.getTableData();
    },
    //查询列表
    getTableData() {
      this.table.loading = true;
      let { page, pageSize } = this.pager;
      let { proName } = this.conditions;
      return new Promise((resolve, reject) => {
        getOrganizationManageList({
          page,
          pageSize,
          tenantCode: proName ? proName : "",
        })
          .then((res) => {
            let {
              data: { result },
            } = res;
            this.table.source = result?.rows || [];
            this.pager.total = result?.total || 0;
            resolve();
          })
          .catch((_) => {
            this.table.source = [];
            this.pager.total = 0;
            reject();
          })
          .finally((_) => {
            this.table.loading = false;
          });
      });
    },
    //新增
    gotoAdd() {
      this.model.id = "";
      this.model.text = "新增根节点";
      this.addRootNodeModalVisible = true;
    },
    //新增字节点
    gotoChildrenNodeAdd(row) {
      this.model.id = "";
      this.model.text = "新增子节点";
      this.model.parentOrgCode = row.orgCode;
      this.addChildrenNodeModalVisible = true;
    },
    //编辑
    gotoEdit(row) {
      //编辑子节点
      if (row.parentOrgCode) {
        this.model.id = row.id;
        this.model.text = "编辑子节点";
        this.model.parentOrgCode = row.parentOrgCode;
        this.model.tenantCode = row.tenantCode;
        this.addChildrenNodeModalVisible = true;
      }
      //编辑根节点
      else {
        this.model.tenantCode = row.tenantCode;
        this.model.orgTypeValue = row.orgTypeValue;
        this.model.id = row.id;
        this.model.text = "编辑根节点";
        this.addRootNodeModalVisible = true;
      }
    },
    //查看
    gotoDetails(row) {
      //子节点
      if (row.parentOrgCode) {
        this.model.id = row.id;
        this.model.text = "查看";
        this.model.parentOrgCode = row.parentOrgCode;
        this.model.tenantCode = row.tenantCode;
        this.addChildrenNodeModalVisible = true;
      }
      //根节点
      else {
        this.model.tenantCode = row.tenantCode;
        this.model.orgTypeValue = row.orgTypeValue;
        this.model.id = row.id;
        this.model.text = "查看";
        this.addRootNodeModalVisible = true;
      }
    },

    //删除
    handleDelClick(row) {
      let that = this;
      let dataLength = that.table.source.length;
      let { id } = row;
      const h = this.$createElement;
      this.$confirm({
        title: "您确定删除所选内容?",
        content: "删除内容后,将无法恢复。",
        okText: "确定",
        okType: "primary",
        cancelText: "取消",
        centered: true,
        icon: () =>
          h("a-icon", {
            props: {
              type: "question-circle",
              theme: "filled",
            },
            style: "color:#FB5A5A",
          }),
        onOk() {
          getOrganizationDelete(id)
            .then((res) => {
              if (dataLength == 1 && that.pager.page > 1) {
                that.pager.page -= 1;
              }
              notificationTip("success", "用户删除成功！");
              that.getTableData();
            })
            .catch();
        },
        onCancel() {},
      });
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },
  },
};
</script>

<style lang="less">
.organization-manage-container {
  height: 100%;
  .flex();
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 0 10px 10px;
  .conditions-container {
    flex-shrink: 0;
  }
  .result-container {
    .flex();
    flex-direction: column;
    flex: 1;
    .common-result-container-header {
      flex-shrink: 0;
    }
    .result-body {
      flex: 1;
      .flex();
      flex-direction: column;
      .table-container {
        flex: 1;
        .table-more-btns {
          color: var(--primary-color);
          margin-top: -20px;
          transform: translateY(-3px);
          margin-left: 20px;
          display: inline-block;
          cursor: pointer;
        }
        .status-text {
          background: #4bc964;
          border-radius: 4px;
          color: #fff;
          padding: 4px 15px;
          &.error {
            background: #ff3f4a;
          }
        }
      }
      .pager-container {
        flex-shrink: 0;
      }
    }
  }
}
</style>
